<!-
  使用v-model控制该组件的显示，:data 传入参数， 参数的格式对象，该对象包含内容{id:'该订单或者账单的id', type:'bill(账单类型)或者order(订单类型)'}
-->
<template>
  <transition name="fade">
    <!-- <div class="payment weui-mask" v-if="value" @click="$emit('input', false)"> -->
    <div class="payment-outer">
      <div class="payment weui-mask" v-if="value && !unionPayShow">
        <div class="payment-way">
          <div class="line-blue"></div>
          <div class="payment-way-item border-bottom" @click.stop="wechatPay">
            <div class="payment-way-item-img">
              <img class="wechatpay" src="../images/wechat-pay.png"/>
            </div>
            <div class="payment-way-item-text">
              微信支付
              <span class="payment-way-recommend">推荐</span>
            </div>
            <div class="flex-r" @click="payType = 1">
              <div class="radio" :class="{filled: payType === 1, outine: payType !== 1}"></div>
            </div>
          </div>
          <div class="payment-way-item" :class="{checked: unionPayShow}" @click.stop="unionPayFun">
            <div class="payment-way-item-img">
              <img class="unionPay" src="../images/China_Unionpay.png"/>
            </div>
            <div class="payment-way-item-text">
              <span></span>
              银联在线支付
            </div>
            <div class="flex-r" @click="payType = 2">
              <div class="radio" :class="{filled: payType === 2, outine: payType !== 2}"></div>
            </div>
          </div>
          <div class="close-x" @click.stop="$emit('input', false)"></div>
        </div>
      </div>
      <unionPay v-if="unionPayShow" @hiddenUnionPay="hideUnionPay" :unionpayInfo="payInfo" @unionPaySuccess="unionPaySuccessFun"></unionPay>
      <xdialogpay v-show="showDialog"></xdialogpay>
    </div>

  </transition>
</template>
<script>
  import unionPay from '@/components/unionPay'
  import xdialogpay from '@/components/x-dialog-pay'
  export default {
    name: 'Payment',
    components: {
      unionPay,
      xdialogpay
    },
    data () {
      return {
        unionPayShow: false,
        showDialog: false,
        payType: '' // 1.微信，2银联
      }
    },
    props: ['value', 'payInfo'], // type 分为order订单 或者 bill账单
    created () {
      this.$store.commit('pay/setPayInfo', this.payInfo)
    },
    methods: {
      wechatPay () {
        this.unionPayShow = false
        let requestData = {
          // type: this.payInfo.type, // 分为order订单 或者 bill账单
          orderId: this.payInfo.serviceId,
          openId: window.localStorage.getItem('openId')
        }
        let _this = this
        _this.$emit('input', false)
        this.$axiosPosting(this.$api.crateOrder, requestData).then(json => {
          if (json.code === '0000') {
            /* eslint-disable */
            WeixinJSBridge.invoke('getBrandWCPayRequest', {
              'appId': json.data.appId,     //公众号名称，由商户传入
              'timeStamp': json.data.timeStamp,         //时间戳，自1970年以来的秒数
              'nonceStr': json.data.nonceStr, //随机串
              'package': json.data.package,
              'signType': json.data.signType,         //微信签名方式：
              'paySign': json.data.paySign //微信签名
            }, function (res) {
              if(res.err_msg === "get_brand_wcpay_request:ok") {
                // _this.showDialog = true
                _this.$router.push({path: '/dealDone', query: {timeStamp: json.data.timeStamp, payMethod: '微信支付', 'orderNumber': json.data.outTradeNo}})
              } // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
            })
          } else {
            _this.$vux.alert.show({
              title: '提示',
              content: json.msg
            })
          }
        })
      },
      hideUnionPay (hidePayment = '') {
        console.log(hidePayment)
        this.unionPayShow = !this.unionPayShow
        if (hidePayment === 'hidePayment') {
          this.$emit('input', false)
        }
        if (hidePayment === 'showPayment') {
          this.$emit('input', true)
        }
      },
      unionPayFun () {
        this.unionPayShow = !this.unionPayShow
        this.$emit('input', false)
      },
      unionPaySuccessFun (resData) {
        let res = resData
        let time = resData.time
        let way = resData.way
        let code = resData.code
        // res.code === '0000'
        this.unionPayShow = !this.unionPayShow
        // this.showDialog = true
        this.$emit('hiddenUnionPay', 'hidePayment')
        this.$router.push({path: '/dealDone', query: {timeStamp: time, payMethod: '银联支付', 'orderNumber': code}})
      }
      /* eslint-enable */
    }
  }
</script>
<style scoped lang="less">
  .close-x {
    position: absolute;
    bottom: -58px;
    width: 1.75rem;
    height: 1.75rem;
    color: white;
    border-radius:100%;
    text-align: center;
    border: 0.05rem solid white;
    left: 50%;
    transform: translateX(-50%);
    &::before {
      content: '';
      width: 0.8rem;
      height: 0.05rem;
      position: absolute;
      left: 50%;
      top: 50%;
      display: inline-block;
      transform: translate(-50%,-50%) rotate(45deg);
      background: white;
    }
    &::after {
      content: '';
      width: 0.05rem;
      height: 0.8rem;.fade-enter-active, .fade-leave-active {
    transition: opacity .5s
  }
  .fade-enter, .fade-leave-to{
    opacity: 0
  }
      position: absolute;
      left: 50%;
      top: 50%;
      display: inline-block;
      background: white;
      transform: translate(-50%,-50%) rotate(45deg);
    }
  }

  .border-bottom {
    border-bottom: 1px solid #ececec;
  }
  .payment-outer {
    // height: 100vh;
  }
  .line-blue{
    height: 4px;
    background-color: #ff9600;
    position: absolute;
    top: 0px;
    width: 100%;
  }
  .payment-way {
    position: fixed;
    // position: relative;
    z-index: 5000;
    width: 14.8rem;
    height: 8.175rem;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #FFFFFF;
    border-radius: 0.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .checked::after {
    content: '';
    border-bottom: 3px solid green;
    border-right: 3px solid green;
    transform: rotate(45deg);
    width: 10px;
    height:20px;
    position: absolute;
    right: 20px;
  }
  .payment-way-item {
    height: 78px;
    display: flex;
    font-size: 15px;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    .payment-way-item-img{
      width: 5rem;
      text-align: center;
      height: 45%;
      img.unionPay{
        height: 1.65rem;
        width: 2.65rem;
      }
      img.wechatpay {
        width: 1.95rem;
        height: 1.6rem;
      }
    }
    .payment-way-item-text{
      width: 7rem;
    }
    .payment-way-recommend{
      margin: 0;
      padding: 0;
      background-color:#ff9600;
      display: inline-block;
      color: white;
      font-size: 10px;
      // padding: 1px 6px;
      margin-left: 6px;
      width: 30px;
      height: 15px;
      line-height: 17px;
      position: relative;
      top: -1px;
      text-align: center;
      border-radius: 3px;
      border: 0;
      outline: 0;
    }
  }
  .flex-r {
    width: 20%;
    text-align: left;
    overflow: visible;
    // height: 0.9rem;
    // line-height: 0.9rem;
  }
  .radio {
    border-radius: 100%;
    box-sizing: border-box;
    margin-left: 0.5rem;
    line-height: 1rem;
    border: 1px solid #D9D9D9;
  }
  .filled {
    width: 0.8rem;
    height: 0.8rem;
    padding: 0.1rem;
    background: #29c429 content-box;
  }
  .outine {
    width: 0.8rem;
    height: 0.8rem;
    background: lighten(#D9D9D9 , 10%)border-box;
  }
</style>

